<template>
   <ContentWrap v-show="setView ==='list'">
    <HeaderTitle :title="'钉钉推送'" :content="'支持通过钉钉发送地震消息、专题图件、报告等内容。'" :isdivider="false"/>
  </ContentWrap>
 <ContentWrap v-show="setView ==='list'">
  <el-row>
    <el-col :span="24">
      <el-tabs v-model="tabName"  @tab-change="tabChange" tab-position="top" class="custom-tabs">
      <el-tab-pane v-for="component, name in tabsMap" :key="name" :name="name" :label="name">
      </el-tab-pane>
    </el-tabs>
    </el-col>
    <el-col :span="24">
      <component ref="listRef" :is="tabsMap[tabName]" :current-tab="tabName" @setViewFun="openForm"/>
    </el-col>
  </el-row>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<ContentWrap v-show="setView ==='GroupRobotsadd'">
    <GroupRobotsForm ref="GroupRobotsFormRef"  @setClose="setClose" />
</ContentWrap>
<ContentWrap v-show="setView==='FilesReleaseadd'">
    <!-- 表单弹窗：添加/修改 -->
    <FilesReleaseForm ref="FilesReleaseFormRef"  @setClose="setClose" :groupList="groupList"/>
</ContentWrap>
<ContentWrap v-show="setView==='NewsReleaseFormadd'">
    <!-- 表单弹窗：添加/修改 -->
    <NewsReleaseForm ref="NewsReleaseFormRef"  @setClose="setClose" :groupList="groupList"/>
</ContentWrap>
</template>
<script lang="ts" setup>
import { groupRobots,newsRelease,filesRelease,sendMessage,sendFiles } from './index';
import GroupRobotsForm from './groupRobots/GroupRobotsForm.vue';
import FilesReleaseForm from './filesRelease/FilesReleaseForm.vue';
import NewsReleaseForm from './newsRelease/newsReleaseForm.vue';
import * as weComNewsApi from '@/api/news/weComNews';

const listRef = ref()
const GroupRobotsFormRef = ref()
const FilesReleaseFormRef = ref()
const NewsReleaseFormRef = ref()

const tabsMap = {
  '群机器人': groupRobots,
  '消息发布规则': newsRelease,
  '文件发布规则': filesRelease,
  '消息推送记录': sendMessage,
  '文件推送记录': sendFiles,
}
const tabName = ref('群机器人')
const tabChange = ()=>{
  // console.log(tabName.value)
}
const groupList = ref([])

const getGroupList= async (type:string)=>{
  groupList.value = await weComNewsApi.getRobotgetAll({ type})
}
const setView = ref('list');
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose=()=>{
  setView.value='list';
  listRef.value.getList();
}
const openForm = async (data) => {
  if(data.str =='GroupRobotsadd'){
    GroupRobotsFormRef.value.open(data.type, data.id)
  }else if(data.str =='FilesReleaseadd'){
    FilesReleaseFormRef.value.open(data.type, data.id)
  }else{
    NewsReleaseFormRef.value.open(data.type, data.id)
  }
  if(data.str !='GroupRobotsadd'){
    await getGroupList('1')
  }
  setViewFun(data.str)
}
</script>
<style scoped lang="scss">
:deep(.custom-tabs) {
  /* 取消下划线 */
  .el-tabs__active-bar {
    display: none;
  }

  /* 可选：取消悬停时的下划线 */
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__item{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
    color: #666;
  }
  /* 设置选中标签页的颜色和背景色 */
  .el-tabs__item.is-active {
    color: #1664FF; /* 选中标签页的文字颜色 */
    background: rgba(53, 96, 246, 0.1); /* 选中标签页的背景颜色 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 38px;
    border-radius: 32px;
    padding: 0px!important;
    margin-right: 8px;
  }
}
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
.titleFont {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
:deep(.el-descriptions__header ){
  margin: 0 !important;
}
  
:deep(.el-descriptions__title) {
  flex: 1 !important;
  font-family: PingFangSC;
  font-weight: normal;
  text-align: center;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' auto;
  color: #333333;
  width: 100%;
  height: 40px;
  background-color: #eaeffe;
  font-size: 16px;
  line-height: 40px;
}

:deep(.el-descriptions__cell) {
  padding: 0 11px !important;
}

:deep(.is-bordered-label) {
  width: 30% !important;
  background: transparent !important;
  font-weight: 400 !important;
  color: #333333 !important;
  font-size: 14px;
  text-align: center !important;
}
:deep(.is-bordered-content) {
  width: 70% !important;
}
</style>